<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>主页界面</title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<style>
			body {
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body>
		<!--导航条-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">

				<!--导航头  -->
				<div class="navbar-header">
					<!-- navbar-brand ： 设置导航条的 首页 图标  -->
					<a href="#" class="navbar-brand">员工管理系统</a>
				</div>

				<!-- 当是小屏幕时，隐藏  -->
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<div class="navbar-brand">
								<span class="glyphicon glyphicon-user"></span>
							</div>
						</li>
						<li>
							<div class="dropdown">
								<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">欢迎你，
    								<span class="caret"></span>
  								</button>
								<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
									<li>
										<a href="#">修改密码</a>
									</li>
									<li>
										<a href="#">安全退出</a>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<ul class="breadcrumb">
			<li style="color: deepskyblue;">员工管理</li>
			<li>员工列表</li>
		</ul>

		<!--按钮组 -->
		<div class="btn-group" role="group" style="margin-bottom:20px">
			<!--data-toggle="modal" data-target="#myModel"   -->
		<!--	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModel">
				<span class="glyphicon glyphicon-pencil"></span>添加员工</button>-->
			<button type="button" class="btn btn-primary" >添加员工</button>
			<button type="button" class="btn btn-success" >添加部门</button>
			<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>批量删除</button>
		</div>

		<div class="panel panel-default panel-success">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-list"></span> 员工列表
			</div>
			<div class="panel-body">
				<table class="table table-striped table-bordered table-hover">
					<tr>
						<th><input type="checkbox" name="checkAll" /></th>
						<th>序号</th>
						<th>员工姓名</th>
						<th>性别</th>
						<th>入职时间</th>
						<th>生日</th>
						<th>年龄</th>
						<th>所在部门</th>
						<th>操作</th>
					</tr>

					<tr>
						<td><input type="checkbox" name="id" /></td>
						<td>1</td>
						<td>大国</td>
						<td>男</td>
						<td>2019-09-01</td>
						<td>1999-08-09</td>
						<td>20</td>
						<td>研发部</td>
						<td>

							<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModel">
				<span class="glyphicon glyphicon-pencil"></span>修改</button>
							<button type="button" class="btn btn-danger">
									<span class="glyphicon glyphicon-remove"></span>删除</button>

						</td>
					</tr>
				</table>

				<!--分页标签  -->
				<nav aria-label="Page navigation" style="text-align: center;">
					<ul class="pagination">
						<li>
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li>
							<a href="#">1</a>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">3</a>
						</li>
						<li>
							<a href="#">4</a>
						</li>
						<li>
							<a href="#">5</a>
						</li>
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

		<!-- 模态窗   show :显示 -->
	<!--	<div class="modal" id="myModel">
			<div class="modal-dialog">
				<div class="modal-content">

					<div class="modal-header bg-info">
						添加
						 关闭窗口 
						<button type="button" class="close" data-dismiss="modal">
					  	  	<span>&times;</span>
					  	  </button>
					</div>
					<form action="main.html" method="get">

						 数据区 
						<div class="modal-body">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">今日内容：</span>
									<textarea rows="5" class="form-control" placeholder="请输入内容..."></textarea>
								</div>

							</div>
						</div>

						<div class="modal-body">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">完成情况：</span>
									<textarea rows="5" class="form-control" placeholder="请输入内容..."></textarea>
								</div>
							</div>
						</div>

						<div class="modal-body">
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon">明日计划：</span>
									<textarea rows="5" class="form-control" placeholder="请输入内容..."></textarea>
								</div>
							</div>
						</div>

						<div class="modal-footer">
							<button type="reset" class="btn btn-danger">重置</button>
							<button class="btn btn-primary">提交</button>
						</div>
					</form>

				</div>

			</div>

		</div>
-->
	</body>

</html>